<script setup>
import {Check, Close} from "@element-plus/icons-vue";
import {ref} from "vue";
import {ElMessage, ElNotification} from "element-plus";
import {
    goodsApprovedService,
    goodsInfoTotalService,
    goodsListService,
    goodsNotApprovedService,
    goodsSearchService
} from "@/api/good";

const tableData = ref([
    {
        gid: '',            //商品id
        gname: '',//商品名称
        gcName: '',//分类名称
        gimg: '',//商品图片
        gunitprice: '', //商品单价
        gstate: '', //商品状态
        gdetails: '',   //商品详情
        greason: '',    //审核不通过理由
        saccount: '',   //供应商账号
        snickname: ''//供应商昵称
    }
])

//获取所有商品
const getTotalGoodsInfo = async () => {
    const result = await goodsInfoTotalService()
    tableData.value = result.data
}
getTotalGoodsInfo()
// 审核不通过对话框
const dialogVisible = ref(false)


// 将商品状态转换为对应文字
const getStatusLabel = (g_state) => {
    switch (g_state) {
        case 0:
            return '未审核';
        case 1:
            return '审核已通过';
        case 2:
            return '审核未通过';
        default:
            return '';
    }
}
//商品审核通过的弹窗
const openMessage = async (goodsId) => {
    const result = await goodsApprovedService(goodsId);
    ElNotification({
        message: '已通过此商品审核',
        type: 'success',
        customClass: 'notify-success'
    })
    // 审核成功后刷新页面
    setTimeout(() => {
        location.reload();
    }, 300); //300ms
}
const reason = ref('')//不通过理由
const g_idNot=ref(0)//审核未通过的商品id

//审核不通过
const goodsNotApproved=async ()=>{
if(reason.value===''){
    ElMessage.error("请输入审核未通过的理由")
    return
}
const result=await goodsNotApprovedService(g_idNot.value,reason.value)
    ElMessage.success("操作成功")
    // 审核成功后刷新页面
    setTimeout(() => {
        location.reload();
    }, 300); //300ms
}
const goodsName = ref("")//搜索的商品名
//查询商品
const goodsSearch = async () => {
    if (goodsName.value == null || goodsName.value.trim() === '') {
        ElMessage.error("请输入搜索商品名")
        return;
    }
    let params = {
        goodsName: goodsName.value ? goodsName.value : null
    }
    let result = await goodsSearchService(params);
    console.log(result.data);
    tableData.value = result.data
    goodsName.value = ''
}
</script>
<template>
    <el-card class="cat-container">
        <div class="header">
            <span>商品管理 > 商品审核</span>
            <el-form inline>
                <el-form-item>
                    <el-input placeholder="请输入商品名" v-model="goodsName" class="search-input"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="search-btn" @click="goodsSearch">查询</el-button>
                    <el-button type="primary" class="reset-btn" @click="getTotalGoodsInfo">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" :header-cell-style="{
            textAlign: 'center',
            height: '30px',
        }" :row-style="{height: '30px'}"
                  style="width: 100%;font-size: 18px;margin-top: 10px; background-color: whitesmoke" size="small"
                  height="500" stripe>
            <el-table-column type="expand">
                <template v-slot="{ row }">
                    <div>
                        <p style="margin-bottom: 5px;margin-left: 60px"><strong>供应商账号: </strong>{{ row.saccount }}
                        </p>
                        <p style="margin-bottom: 5px;margin-left: 60px"><strong>供应商名称:</strong> {{ row.snickname }}
                        </p>
                        <p style="margin-bottom: 5px;margin-left: 60px"><strong>商品详情:</strong> {{ row.gdetails }}
                        </p>
                        <p v-if="row.gstate === 2" style="margin-left: 60px"><strong>审核不通过理由:</strong>
                            {{ row.greason }}</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="序号" align="center" width="90px">
                <template v-slot="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="商品名称" align="center" prop="gname" width="140px"></el-table-column>
            <el-table-column label="商品分类" align="center" prop="gcName" width="130px"></el-table-column>
            <el-table-column prop="image" align="center" label="图片" width="150px">
                <!-- 图片的显示 -->
                <template v-slot="{ row }">
                    <img :src="row.gimg" v-if="row.gimg" style="width: 100%; height: auto; max-width: 140px; max-height: 90px;"/>
                    <img :src="require('@/assets/空2.png')" v-else style="width: 100%; height: auto; max-width: 140px; max-height: 90px;"/>
                </template>
            </el-table-column>
            <el-table-column label="商品单价" align="center" prop="gunitprice" width="140px">
                <template v-slot="scope">
                    {{ '¥' + scope.row.gunitprice }}
                </template>
            </el-table-column>
            <el-table-column label="商品状态" align="center" prop="gstate" width="130px">
                <template v-slot="scope">
                    {{ getStatusLabel(scope.row.gstate) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="{row}">
                    <el-button class="check" :icon="Check" style="color: green;background-color: darkseagreen" circle
                               plain type="primary" @click="openMessage(row.gid)"
                               :disabled="row.gstate !== 0"></el-button>
                    <el-button :icon="Close" circle plain type="danger" @click="dialogVisible = true;g_idNot=row.gid"
                               :disabled="row.gstate !== 0"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        输入审核不通过理由对话框-->
        <el-dialog
                v-model="dialogVisible"
                title="请输入审核未通过原因"
                width="500"
                :before-close="handleClose"
        >
            <el-input v-model="reason" style="width:350px" plain/>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="goodsNotApproved();dialogVisible = false;">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    name: "CheckGoods"
}
</script>


<style scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    background-color: #ffffff;
    margin-top: -10px;
    margin-left: -10px;
    margin-right: -15px;
    padding-left: 5px;
    padding-right: 5px;
}

.cat-container {
    min-height: 100vh;
    background-color: rgba(135, 206, 250, 0.2);
    width: 100%;
    height: 100%;
    font-size: 10px;
}

.search-input {
    font-size: 10px;
    height: 25px;
    margin-top: 20px;
    background-color: #f13b82;
}

.search-btn {
    height: 25px;
    margin-left: 30px;
    background-color: lavender;
    color: mediumpurple;
    border-color: mediumpurple;
    margin-right: 30px;
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 10px;
}

.search-btn:hover {
    background-color: mediumpurple;
    color: white;
}

.reset-btn {
    height: 25px;
    margin-left: 30px;
    margin-right: 50px;
    margin-bottom: 0;
    margin-top: 20px;
    font-size: 10px;
    background-color: beige;
    color: darkorange;
    border-color: darkorange;
}

.reset-btn:hover {
    background-color: darkorange;
    color: white;
}

/*//让弹窗居中*/
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}
</style>
<style>
/*// 设置审核通过时的弹出框*/
.notify-success {
    top: 50px !important;
    width: 200px !important;
    height: 50px !important;
}
</style>
